<template>
  <div>
    <div class="app-container">

<!--      <div class="filter-container">
      <el-input  v-model="query.title" placeholder="文章标题" class="filter-item" style="width: 200px;margin-right: 5px;" ></el-input>
      <el-select v-model="query.classifyId" style="width: 200px;margin-right: 5px;" class="filter-item">
        <el-option v-for="item in classifies" :key="item.value" :label="item.label " :value="item.value" />
      </el-select>
      <el-button @click="getRecords" type="primary" class="filter-item">查询</el-button>
      <el-button @click="reload" type="danger" class="filter-item">刷新</el-button>
      </div>-->

      <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
    <el-table-column
      type="selection"
      width="55" />
    <el-table-column prop="id" label="ID" width="80" />
<!--    <el-table-column prop="classify_name" label="分类" width="100" />-->
    <el-table-column prop="title" label="标题" width="250" />
<!--    <el-table-column prop="key_word" label="关键字" width="100" />-->
<!--    <el-table-column prop="description" label="描述" width="200" />-->
    <el-table-column prop="content" label="内容"/>
<!--    <el-table-column prop="cover_url" label="封面" width="100" >
      <template slot-scope="scope">
        <img v-if="scope.row.cover_url" class="table-img" :src="host+scope.row.cover_url">
      </template>
    </el-table-column>-->
<!--    <el-table-column prop="see_num" label="阅读量" width="80" />-->
<!--    <el-table-column prop="up_down" label="上架/下架" width="150" >
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.up_down"
          active-color="#409EFF"
          inactive-color="#909399"
          :active-value="1"
          :inactive-value="2"
          @change="changeSwitch(scope.row)">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="is_top" label="置顶" width="80" >
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.is_top"
          active-color="#409EFF"
          inactive-color="#909399"
          :active-value="1"
          :inactive-value="2"
          @change="changeSwitch(scope.row)">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" width="80" >
      <template slot-scope="scope">
        <el-input @input="changeSwitch(scope.row)"  v-model="scope.row.sort" placeholder="请输入序号"></el-input>
      </template>
    </el-table-column>-->
    <el-table-column prop="created_at" label="创建时间"  />
    <el-table-column  label="操作" >
      <template slot-scope="scope">
				<el-button
				size="mini"
				@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<!--				<el-button
				size="mini"
				type="danger"
				@click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
			</template>
    </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5,10, 20, 100, 200]"
      :page-size="pagination.pageSize"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

    </div>
  </div>
</template>

<script>

import { myGet, myPost } from '@/utils/myRequest'

const urlArticleAdd = '/guard/article/add'
const urlArticleLst = '/guard/article/lst'
const urlArticleDel = '/guard/article/del'
const urlArticleClassifyLst = '/guard/article/classify/lst'

export default {


  data() {
    return {
      host:process.env.VUE_APP_HOST,
      listLoading:false,
      list:[],
      classifies:[{value:0,label:'全部'}],
      query:{
        title:'',
        classifyId:0,
      },
      pagination:{
        page:1,
        pageSize:10,
        total:0,
      }
    }
  },
  methods: {

    reload(){
      Object.assign(this.$data.query,this.$options.data().query)
      Object.assign(this.$data.pagination,this.$options.data().pagination)
      this.getRecords()
    },
    getRecords(){
      this.listLoading = true
      let params = Object.assign(this.query,this.pagination)
      myGet(urlArticleLst,params).then(res=>{
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
          this.pagination.total = res.data.total
        }
      })
    },
    getArticleClassify(){
      myGet(urlArticleClassifyLst).then(res=>{
        if(res.status){
          res.data.records.forEach(item=>{
            this.classifies.push({
              value:item.id,
              label:item.name
            })
          })
        }
      })
    },
    handleEdit(index,row){
      let id = row.id
      this.$router.push(`/article/edit/${id}`)
    },

    handleDelete(index,row){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = row.id
        myGet(urlArticleDel,{id}).then(res=>{
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },
    changeSwitch(row){

      myPost(urlArticleAdd, {
        is_top:row.is_top,
        up_down:row.up_down,
        sort:row.sort,
        id:row.id,
      }).then(res => {
        if(res.status){
          this.$message.success(res.msg)
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.getRecords()
    },
    handleCurrentChange(val) {
      this.pagination.page  = val
      this.getRecords();
    },
  },

  mounted() {
    this.getRecords()
    this.getArticleClassify()
  },
}
</script>

<style scoped>
  .table-img{
    width: 50px;
    height: 50px;
}
</style>
